@import './../../../assets/css/CommonStyle.scss';

.rowAction {
  display: flex;
  color: #429cff;
  align-items: center;
  width: 200px;
}

@include media('>=tablet') {
  .icon_tips {
    height: p-w(24);
    width: p-w(24);
    margin-left: pad-w(9);
  }
  .SeeDisContainer {
    position: relative;
    .mobileAddVisit {
      display: none;
    }
    .listContainer {
      padding-bottom: 40px;
    }
    .sear {
      width: 400px;
      margin: auto;
    }
    .addOneCaseContainer {
      display: flex;
      justify-content: flex-end;
      flex: 1;
    }
    .addOneCase {
      border: 1px solid #429cff;
      color: #429cff;
      padding: p-w(6) p-w(12);
      background-color: white;
      border-radius: 2px;
    }
    .addOneCaseDisabel {
      color: rgba($color: #333, $alpha: 0.2);
      border: 1px solid rgba($color: #333, $alpha: 0.2);
    }

    .heig {
      display: block;
      height: 67px;
    }

    .PageInfoCompount {
      display: none;
    }

    .fin {
      color: #63be00;
    }

    .con {
      color: #f5a623;
    }

    .table {
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    }

    .pa {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 40px;
    }
    .ant-table-body {
      @include normal-table;
      .rowAction .ant-btn {
        padding-left: 0;
      }
      .rowAction .ant-btn:last-child {
        padding-right: 0 !important;
      }
    }
    .ant-pagination-item {
      border-radius: 100%;
    }

    .ant-pagination-prev,
    .ant-pagination-item-link {
      border-radius: 100%;
    }

    .ant-pagination-item-active {
      background: $btn-color;
      border: none;

      a {
        color: $bg-header;
      }
    }

    .downloadBtn {
      text-align: center;
    }
    .toSeeGauge {
      &::after {
        content: '';
        height: 12px;
        width: 1px;
        top: 5px;
        right: -6px;
        background-color: #1890ff;
        position: absolute;
      }
    }
    .disabledColor {
      color: rgba(black, 0.25);
    }
    .downloadBtn {
      &::after {
        content: '';
        height: 12px;
        width: 1px;
        top: 5px;
        right: 5px;
        background-color: #1890ff;
        position: absolute;
      }
    }
    .a1 {
      display: inline-block;
      padding-right: 7px;
      border-right: 1px solid $table-sm-color;
      margin-right: 7px;
    }
    .patientInfo {
      display: flex;
      align-items: center;
      height: 52px;
      .patienCode {
        @include nowrap-elips;
        width: p-w(400);
      }
      .patienName {
        @include nowrap-elips;
        width: p-w(400);
        margin-left: p-w(80);
      }
    }

    .ant-btn {
      border: none;
      background-color: rgba(0, 0, 0, 0);
      box-shadow: none;
      padding-right: 7px;
      color: #429cff;
      padding-left: 0;
      &:disabled {
        color: rgba(0, 0, 0, 0.2);
      }
    }
  }
}
@include media('>phone', '<=tablet') {
  .SeeDisContainer {
    .listContainer {
      padding-bottom: 40px;
    }
    .sear {
      width: 400px;
      margin: auto;
    }
    .icon_tips {
      margin-left: pad-w(9);
      height: pad-w(24);
      width: pad-w(24);
    }
    .addOneCaseContainer {
      display: flex;
      justify-content: flex-end;
      flex: 1;
    }
    .addOneCase {
      border: 1px solid #429cff;
      color: #429cff;
      padding: pad-w(6) pad-w(12);
      background-color: white;
      border-radius: 2px;
    }
    .heig {
      display: block;
      height: 67px;
    }

    .content {
      min-height: calc(100vh - 167px - 0.5rem);
      padding-top: 16px;
    }

    .PageInfoCompount {
      display: none;
    }

    .fin {
      color: #63be00;
    }

    .con {
      color: #f5a623;
    }

    .table {
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    }
    .ant-table-body {
      @include normal-table;
      .rowAction .ant-btn {
        padding-left: 0;
      }
      .rowAction .ant-btn:last-child {
        padding-right: 0 !important;
      }
    }

    .pa {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 40px;
    }

    .ant-pagination-item {
      border-radius: 100%;
    }

    .ant-pagination-prev,
    .ant-pagination-item-link {
      border-radius: 100%;
    }

    .ant-pagination-item-active {
      background: $btn-color;
      border: none;

      a {
        color: $bg-header;
      }
    }

    /* .mar {
    margin-left: 20px;
  } */
    .downloadBtn {
      text-align: center;
    }
    .toSeeGauge {
      &::after {
        content: '';
        height: 12px;
        width: 1px;
        top: 5px;
        right: -6px;
        background-color: #1890ff;
        position: absolute;
      }
    }
    .disabledColor {
      color: rgba(black, 0.25);
    }
    .downloadBtn {
      &::after {
        content: '';
        height: 12px;
        width: 1px;
        top: 5px;
        right: 5px;
        background-color: #1890ff;
        position: absolute;
      }
    }
    .a1 {
      display: inline-block;
      padding-right: 7px;
      border-right: 1px solid $table-sm-color;
      margin-right: 7px;
    }
    .patientInfo {
      display: flex;
      // width: 70%;
      padding: 10px 0px;
      .patienCode {
        display: flex;
      }
      .patienName {
        display: flex;
        justify-content: flex-end;
        margin-left: m-w(80);
      }
    }

    .rowAction {
      display: flex;
      color: #429cff;
      align-items: center;
      width: 200px;
    }
    .moreAction {
      border-left: 1px solid #d6d6d6;
      padding-left: 7px;
    }

    .ant-btn {
      border: none;
      background-color: rgba(0, 0, 0, 0);
      box-shadow: none;
      padding-right: 7px;
      color: #429cff;
      &:disabled {
        color: rgba(0, 0, 0, 0.2);
      }
    }
  }
}
@include media('<=phone') {
  .SeeDisContainer {
    .layoutContent {
      min-height: calc(100vh - 80px);
      background: #f0f2f5;
    }
    .icon_tips {
      height: m-w(35);
      width: m-w(35);
      margin-left: m-w(9);
    }
    .addOneCaseContainer {
      display: none;
    }
    .mobileAddVisit {
      position: fixed;
      z-index: 900;
      top: m-w(160);
      right: 0px;
      display: flex;
      background-color: white;
      color: #429cff;
      font-size: m-w(30);
      height: m-w(72);
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      padding: 0px m-w(20);
      align-items: center;
      box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
    }

    .addOneCaseDis {
      color: rgba($color: #333, $alpha: 0.2);
    }
    .ant-btn.ant-input-search-button.ant-btn-primary.ant-btn-lg {
      background-color: transparent;
      border-color: $table-sm-color;
      border-right: none;
      border-radius: 4px 0 0 4px;
      background-color: $bg-color;
      /* left: -100%; */
    }
    .listContainer {
      margin-top: 10px;
      // min-height: 100vh;
    }

    .ant-input.ant-input-lg {
      border: 1px solid $table-sm-color;
    }

    .ant-input.ant-input-lg {
      width: calc(100% - 60px);
      border-left: none;
      border-radius: 0 4px 4px 0;
      background-color: $bg-color;
    }

    .ant-input-group {
      display: inline-flex;
      margin-left: 10px;
      margin-bottom: m-h(40);
      position: fixed;
      /* background-color: $bg-color; */

      border-left: none !important;

      .ant-input.ant-input-lg {
        order: 1;
      }
    }

    .ant-input:focus {
      border-color: $table-sm-color;
      border-right-width: 1px !important;
      outline: 0;
      box-shadow: none;
    }

    .ant-input-group-addon:last-child {
      width: 40px;
      border-right: none;
      border-radius: 4px 0 0 4px;
    }

    /* -------------------------- */
    .header {
      width: 100% !important;

      padding: {
        left: m-w(30);
        right: m-w(30);
      }

      .header_name {
        position: relative;
        top: 0;
        margin-left: m-w(39);
        left: -30%;
        float: left;
        display: block;
      }

      .userName-dropdown {
        position: relative;
        top: 0;
        left: 0;
        float: right;
        display: block;
      }
    }

    .sear {
      background-color: white;
      height: m-h(100);
    }

    .center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .content {
      background-color: $bg-color;
    }

    .upRow {
      font-size: m-w(22);
      padding-top: m-h(24);
      display: flex;
      .doctorName {
        display: flex;
        flex: 2;
      }
      .qrtime {
        display: flex;
        flex: 2;
      }
      .statusIcon {
        display: flex;
        width: m-w(180);
        justify-content: flex-end;
        .anticonIcon {
          font-size: m-w(28);
        }
      }
    }

    .downRow {
      display: flex;
      font-size: m-w(28);
      // margin-top: m-h(40);
      padding: m-w(40) 0px;
      border-bottom: 1px dashed rgba($color: $header-color, $alpha: 0.2);

      .qrName {
        display: flex;
        flex: 3;
        align-items: center;
      }
      .visitTime {
        display: flex;
        flex: 2;
        justify-content: flex-end;
      }
    }

    .btnGP {
      display: flex;
      padding-top: m-w(24);
      .actionBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
      }
      .leftLine {
        border-left: 1px solid rgba($color: #333, $alpha: 0.2);
      }
    }
    .a1 {
      width: 100%;
    }

    .status {
      /* border-right: 1px solid $table-sm-color; */
      height: m-h(88);

      &::after {
        position: absolute;
        top: 27.3%;
        display: block;
        height: 45.4%;
        width: 1px;
        background-color: $table-sm-color;
        left: calc(100% - 0.5px);
        content: '';
      }
    }

    .action {
      height: m-h(88);
    }

    .heig {
      height: 0;
    }

    .PageInfoCompount {
      display: none;
    }

    .header_name {
      display: initial;
    }

    .mo-dataList {
      background-color: $bg-header;
      padding: m-w(24) m-w(30);
      margin-bottom: 10px;
    }
    .moList {
      min-height: 70vh;
      overflow: scroll;
    }

    .patientInfo {
      display: flex;
      background-color: white;
      // position: fixed;
      width: 100%;
      z-index: 50;
      padding: {
        top: m-w(0);
        bottom: m-w(32);
        left: m-w(30);
        right: m-w(30);
      }
      justify-content: space-between;
      .patienCode {
        @include nowrap-elips;
        width: m-w(300);
      }
      .patienName {
        @include nowrap-elips;
        width: m-w(300);
      }
    }

    .scanActionIcon {
      margin-left: m-w(10);
      height: m-w(27);
      width: m-w(27);
    }
  }
}
